<template>
  <div style="min-width:auto;max-width: 1100px;margin: 0 auto;">
    <div class="card-top-box">
      <WeatherCard/>
      <CalendarCard/>
    </div>
    <Line/>
    <InfoCards/>
    <Line/>
    <MenoCards/>
  </div>
</template>
<script setup name="Home">
import { defineAsyncComponent } from 'vue';

const WeatherCard = defineAsyncComponent(() => import('./WeatherCard.vue'));
const CalendarCard = defineAsyncComponent(() => import('./CalendarCard.vue'));
const InfoCards = defineAsyncComponent(() => import('./InfoCards.vue'));
const MenoCards = defineAsyncComponent(() => import('./MenoCards.vue'));
const Line = defineAsyncComponent(()=>import('./Line.vue'))

</script>
<style scoped lang="less">
.card-top-box {
  --font-color: #FFFFFF;
  --card-border-radius:16px;
  display: grid;
  grid-template-columns: 1.85fr 1fr;
  grid-column-gap: 18px;
}
</style>
